Ext.define('UDZ.view.Articles', {
    extend: 'Ext.Panel', //继承.Panel*****
    xtype: 'article',
    requires: [
        'Ext.TitleBar',
        // 'Ext.field.Email',
        'Ext.MessageBox',
        'Ext.Img',
        'Ext.field.*'
    ],
    config: {
        xtype:'formpanel',
        id:'panel01',
        style:'background-color:white;',
        fullscreen:true,
        layout:{
            type:'card',
            animation:{
                // type:'pop',
                type:'slide',
                direction:'left',
                // duration:1000
            }
        },
        items:[
            {
                xtype:'panel',
                id:'div01',
                style:'background-color:white;',
                layout:{
                    type:'vbox'
                },
                items:[
                    {
                        xtype:'toolbar',
                        title:'找回密码',
                    },
                    {
                        flex:2,
                        xtype:'panel',
                        // style:'background-color:green',
                        styleHtmlContent:false,
                        html:[
                            '<div style="width: 90%;margin: auto;margin-top:30px;">'+
                            '<img src="resources/images/mobile.png" style="width: 40px;height: 40px">'+
                            '<hr style="display: inline-block;height: 1px;width:32%;position: relative;top: -10px;">'+
                            '<img src="resources/images/pointer.png" style="width: 40px;height: 40px">'+
                            '<hr style="display: inline-block;height: 1px;width:32%;position: relative;top: -10px;">'+
                            '<img src="resources/images/miyue.png" style="width: 40px;height: 40px">'+
                            '</div>'+
                            // '<br>'+
                            '<div style="text-align: center;width: 92%;height: 20px;margin: auto;color: #a3a3a3;font-size:0.9rem">' +
                            '<span style="float: left">邮箱号码</span>' +
                            '<span >输入验证码</span>' +
                            '<span style="float: right">输入密码</span>'+
                            '</div>'
                        ]
                    },
                    {
                        flex:1,
                        xtype:'panel',
                        // style:'position:relative',
                        items:[
                            {
                                xtype:'emailfield',
                                cls:'border',
                                style:'position:relative;width:80%;margin:auto',
                                label:'邮箱号',
                                labelCls:'labelCls border-right'

                            }
                        ]
                    },
                    {
                        flex:5,
                        items:[
                            {
                                xtype:'button',
                                text:'下一步',
                                listeners:{
                                    tap:function () {
                                        Ext.getCmp('panel01').setActiveItem(1,'slide');
                                    }
                                }
                            }
                        ]
                    }
                ]
            },
            {
                xtype:'panel',
                id:'div02',
                // style:'background-color:red',
                layout:{
                    type:'vbox'
                },
                items:[
                    {
                        xtype:'toolbar',
                        style:'background-color:red',
                        title:'找回密码',
                    },
                    {
                        flex:1,
                        xtype:'button',
                        text:'返回',
                        listeners:{
                            tap:function () {
                                Ext.getCmp('panel01').animateActiveItem(2,'slide');
                            }
                        }
                    },
                ]
                    },
            {
                xtype:'button',
                id:'div03',
                text:'返回',
                html:'修改地址',
                id:'div03',
                style:'background-color:green;padding:20px',
                listeners:{
                    tap:function () {
                        Ext.getCmp('panel01').animateActiveItem(0,'slide');
                    }
                }
            }
        ]

        //     }
        // ]

        // items: [
        //     {
        //         xtype:'button',
        //         text:'Go back',
        //         id:'btnBackMain',
        //         // handler:function () {
        //         //     var v=Ext.getCmp('myform').getValues();//序列化
        //         //
        //         // }
        //     }
        // ]

            }
});
